 <#import "inc/macro-page.html" as panel>
<#import "macro-filter-card-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "九宫格分类结构预警" "">
<style>
.sudoku-center{
   text-align:center;
   vertical-align: middle !important;
}
</style>
</@panel.header>
<@panel.body>
            <!-- Bread crumb -->
            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3>九宫格分类结构预警</h3> </div>
                <div class="col-md-7 align-self-center">
                    <div class="page-nav-bar">
                       <button class="btn btn-info btn-click-bind" data-sign="11">九宫格分类分析</button>
                       <button class="btn btn-inverse btn-click-bind" data-sign="12" disabled>九宫格发展策略</button>
                    </div> 
                </div>
            </div>
            <!-- End Bread crumb -->
            <!-- Container fluid  -->
            <div class="container-fluid">
                <!-- Start Page Content -->                
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
							<div class="custom-card-header quick-bar">
								<div class="hint">&nbsp;</div>
					    		<@seachpanel.filterbox></@seachpanel.filterbox>
								<button id="id-export-file" type="button" class="btn btn-dark btn-outline btn-sm m-l-10" title="导出"><i class="fa fa-share-square-o"></i></button>
							</div>
			                     
                            <div class="card-body">
		                        <div id="id-sudoku-diagram" class="row m-t-20">
		                        	<div class="col-lg-12">
	                                    <table id="id-sudoku-table" class="table table-bordered table-cell-wrap"  cellspacing="0">
	                                        <thead>
	                                            <tr>
	                                                <th class="col-lg-2">九宫格类型</th>
	                                                <th class="col-lg-3">人员名单</th>
	                                                <th class="col-lg-7">发展策略</th>
	                                            </tr>
	                                        </thead>
	                                     </table>
		                        	</div>
		                        </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End PAge Content -->
            </div>
            <!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/datatables.min.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/jquery.dataTables.zh-CN.js"></script>
<script type="text/javascript">
    // word导出事件
    document.getElementById('id-export-file').addEventListener('click', function() {
        // Ensure echarts charts have finished rendering
        setTimeout(() => {
            var charts = document.querySelectorAll('canvas');
            charts.forEach(chart => {
                var dataURL = chart.toDataURL();
                var imgTag = '<img src="' + dataURL + '" />';
                chart.insertAdjacentHTML('beforebegin', imgTag);
                chart.style.display = 'none'; // Hide the original canvas
            });

            // Create a temporary container for the export
            var exportContainer = document.createElement('div');
            exportContainer.id = 'export-container';
            exportContainer.style.width = '100%';

            // Clone ECharts charts
            // var chartContainer = document.getElementById('id-leader-chart').cloneNode(true);
            // exportContainer.appendChild(chartContainer);


            var clonedTable = document.getElementById('id-sudoku-table').cloneNode(true);
// 直接添加内联样式到每个th和td元素
            clonedTable.querySelectorAll('th, td').forEach(function(cell) {
                cell.style.border = '1px solid #000';
                cell.style.borderCollapse = 'collapse'; // 注意：borderCollapse是CSS属性，不能作为内联样式设置，但这里为了示例而写
                cell.style.textAlign = 'center';
            });
            clonedTable.querySelectorAll('.stat-excellent-bg').forEach(function(cell) {
                cell.style.color = '#fff';
                cell.style.background = '#A4CE9D';
            });
            clonedTable.querySelectorAll('.stat-outstanding-bg').forEach(function(cell) {
                cell.style.color = '#fff';
                cell.style.background = '#67AD5B';
            });
            clonedTable.querySelectorAll('.stat-good-bg').forEach(function(cell) {
                cell.style.color = '#fff';
                cell.style.background = '#58a2eb';
            });
            clonedTable.querySelectorAll('.stat-pass-bg').forEach(function(cell) {
                cell.style.color = '#fff';
                cell.style.background = '#ffa206';
            });
            clonedTable.querySelectorAll('.stat-bad-bg').forEach(function(cell) {
                cell.style.color = '#fff';
                cell.style.background = '#ef5350';
            });
            clonedTable.querySelectorAll('.stat-inverse-bg').forEach(function(cell) {
                cell.style.color = '#fff';
                cell.style.background = '#6a707e';
            });

            exportContainer.appendChild(clonedTable);

            // Convert the export container's HTML to a Word document
            var htmlHeader = `
          <!DOCTYPE html>
          <html>
          <head>
            <style>
               table, th, td {
                   border: 1px solid #000;
                   text-align: center;
                   border-collapse: collapse;
               }
            </style>
          </head>
          <body>`;
            var htmlFooter = `
          </body>
          </html>`;
            var htmlContent = htmlHeader + exportContainer.innerHTML + htmlFooter;

            var blob = new Blob([htmlContent], { type: 'application/msword' });
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = '九宫格发展策略.doc';
            a.click();
            URL.revokeObjectURL(url);

            // Clean up by removing the temporary container
            exportContainer.remove();

            // Revert changes made to the document for export
            charts.forEach(chart => {
                chart.previousSibling && chart.previousSibling.remove();
                chart.style.display = 'block'; // Restore the original canvas
            });
        }, 1000); // Adjust the timeout as needed to ensure charts have rendered
    });
const suggest=[
	"<ul><li>考虑降级，岗位调整</li><li>进行待岗培训，开展系统性学习和实操训练</li><li>再培训后仍不合格考虑辞退</li></ul>",
	"<ul><li>给予绩效警告</li><li>加强业务指导</li><li>暂停加薪或晋升机会</li><li>调整工作任务</li></ul>",
	"<ul><li>给予绩效警告</li><li>加强业务指导</li><li>暂停加薪或晋升机会</li><li>考虑内部换岗以发挥其潜能</li></ul>",
	"<ul><li>进入观察期，继续观察其绩效表现，考虑下一步如何处理</li><li>暂停加薪或晋升机会</li><li>加强能力培养，应与其共同制定挑战性目标，并辅导其有效提升核心能力</li></ul>",
	"<ul><li>分析挖掘绩效改善潜力</li><li>要求/鼓励镇区更高的绩效表现</li><li>加强业务指导与能力培养</li></ul>",
	"<ul><li>结合岗位要求，加强考核督促</li><li>加强业务指导</li><li>应针对其优势，指派更具挑战性的任务，要求/鼓励争取更高的绩效表现</li></ul>",
	"<ul><li>在现岗位继续发展</li><li>暂停加薪或晋升机会</li><li>帮助其开展自我分析，系统性培训与带教辅导</li></ul>",
	"<ul><li>赋予更大的责任</li><li>给予奖金、加薪或晋升鼓励</li><li>应重加强培育他们具备向上一层级（方格9）发展所需的核心能力，以激发其展现更多潜能</li></ul>",
	"<ul><li>赋予更大的责任和平台</li><li>应在较短的时间内安排合适的新职务，使他们迅速获得晋身</li></ul>",
];
const level=[
	"D档",
	"C档",
	"C档",
	"C档",
	"B档",
	"B档",
	"A档",
	"B档",
	"A档",
	"A+档",
];
const statClass=[
	'stat-bad-bg',
	'stat-pass-bg',
	'stat-pass-bg',
	'stat-pass-bg',
	'stat-good-bg',
	'stat-good-bg',
	'stat-excellent-bg',
	'stat-good-bg',
	'stat-excellent-bg',
	'stat-outstanding-bg'
];
$(document).ready(function(){
	
	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/t/sudoku";
		  if(12===val){
			  ctx = "/t/sudoku12";
		  }
		  window.location.href="${ROOT}" + ctx;
	});
	
	var $table = null;
	var convertDataToView = function(allData){
		//构造数据
		var data=[];
		var line = allData[0];
			for(var i=0; i<9; i++){
				var item = line.sudoku[i];
				data.unshift({
					index: item.cellIndex-1,
					name: level[item.cellIndex-1]+item.cellIndex+item.remark,
					users: item.names,
					suggest: suggest[item.cellIndex-1]
				});
		};
		
		
		if($table) {
			$table.fnClearTable();
			$table.fnDestroy();
		}
		
		$table = $("#id-sudoku-table").dataTable({
		    "ordering":false,
		    "searching": false,
		    "bFilter":false,
		    "info": false,
		    "paging": false,
		    'bAutoWidth':false,
		    "bDestroy" : true,
		    "aoColumns": [
	   	        //设置列
	   	        {'mData': 'name','sWidth':'120px', defaultContent: '' },
	   	        {'mData': 'users','sWidth':'160px', defaultContent: '' },
	   	        {'mData': 'suggest','sWidth':'320px', defaultContent: '' }
	   	    ],
	   	    "aoColumnDefs": [{
	   	    	'sClass':'sudoku-center',
	   	        'sDefaultContent': '',
	   	        'aTargets': [0],
	   	        'mRender':function(id,type,object){
	   	        	return object.name;
	   	        }
	   	    }],
		    "data":data,
		    'createdRow': function(row, data, index){		    	
		    	$('td', row).eq(0).addClass(statClass[data.index]);
		    }
		});
		$table.fnDraw();
	};

    //初始化过滤面板
    $.post('${ROOT}/t/treeNav',function(data, status){
    	if(data.code==="ok"){
			$.fn.filterBox({
				data: data.data,
				onsubmit: function(form, data){
				    $.post('${ROOT}/t/sumsudoku11',data,function(data, status){
				    	if(data.code==="ok"){
				    		if( data.data){
					    		convertDataToView(data.data);
				    		}else {
				    			toastr.error("未找到任何资料")
				    		}
				    	}else{
				    		toastr.error(data.desc);
				    	}
				    }, 'json');
				}
			})
    	}
    });
    
    // 导出事件绑定
    // $('#id-export-file').click(function(){
    // 	var pdfCanvas = $.fn.pdfcanvas({
    // 		title: '九宫格分类结构预警 - 发展策略',
    // 		keywords: '单位和部门：；岗位类别：'
    // 	})
    // 	pdfCanvas.addDom(document.getElementById("id-sudoku-diagram"));
    // 	pdfCanvas.print();
    //
    // });
    //先提取数据
    $.post('${ROOT}/t/lstsudoku11',function(data, status){
    	if(data.code==="ok"){
    		if( data.data){
	    		convertDataToView(data.data);
    		}else {
    			toastr.error("未找到任何资料")
    		}
    	}else{
    		toastr.error(data.desc);
    	}
    }, 'json');
});
</script>
</@panel.footer>
</#escape>